<template>
  <div class="countContent">
    <h1>求和：{{ sum }}</h1>
    <h1>学校：{{ school }}</h1>
    <h2>放大：{{ bigsum }}</h2>
    <h2>大写：{{ upperSchool }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { storeToRefs } from "pinia";
//引入useCountStore
import { useCountStore } from "@/store/count";
//使用useCountStore，得到一个专门保存count相关的store
const countStore = useCountStore();
console.log("countStore", countStore);
//storeToRefs只会关注store中的数据，不会关注store中的方法
const { sum, school, bigsum, upperSchool } = storeToRefs(countStore); //解构赋值store用的是storeToRefs
// console.log("toRefs(countStore)", toRefs(countStore));
// console.log("storeToRefs(countStore)", storeToRefs(countStore));
// console.log("sum", sum);
// console.log("countStore", countStore);
// //以下两种都可以获取到store的state的数据
// console.log("countStore", countStore.$state.sum);
// console.log("countStore", countStore.sum);

let n = ref(1);
function add() {
  // sum.value += n.value;
  //第一种修改store数据的方式；pinia直接直觉修改state的数据，vuex不能这样子，只能action进行修改
  // countStore.sum += n.value;
  //第二种批量修改store数据方式：$patch
  // countStore.$patch({
  //   sum: countStore.sum + n.value,
  //   school: "上海复旦大学",
  // });
  //第三种修改用actions方法修改
  countStore.increment(n.value);
}
function minus() {
  countStore.sum -= n.value;
}

let obj = reactive({
  a: 1,
  b: ref(3),
});
console.log(obj.a);
console.log("reactive自动拆包ref，不需要.value:", obj.b);
</script>

<style scoped>
.countContent {
  background: #ccc;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 10px;
}
</style>
